<template>
  <div>
    <el-table
      :data="data"
      style="width: 100%"
      :header-cell-style="{background:'#F3F4F7',color:'#555'}"
      height="260"
    >
      <el-table-column
        label="门店名称"
        width="180"
      >
        <template slot-scope="scope">
          <span
            :style="{
              color: '#FFF',
              display: 'inline-block',
              backgroundColor: rankNumType[scope.$index]?rankNumType[scope.$index]:'#ccc',
              height: size,
              width: size,
              lineHeight: size,
              textAlign: 'center',
              borderRadius: '50%'}"
          >{{ scope.$index + 1 }}
          </span>
          {{ scope.row.siteName }}
        </template>
      </el-table-column>
      <el-table-column
        prop="patrolTotal"
        label="巡店次数"
        width="180"
      >
      </el-table-column>
      <el-table-column
        prop="issueTotal"
        label="问题数"
      >
      </el-table-column>
      <el-table-column
        prop="issueChain"
        label="问题环比"
      >
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'RankingChart',
  props: {
    data: {
      type: Array,
      default: null
    }
  },
  data() {
    return {
      rankNumType: ['#F56C6C', '#E6A23C', '#409EFF'],
      size: '20px'
    }
  },
  methods: {
    test(scope) {
      console.log(scope)
    }
  }
}
</script>

<style scoped>

</style>
